<template>
	<view style="margin: 0px auto;display: block;width: 500rpx;">
		<view class="yt_input">
			<view class="yt_input_before">
				<image class="yt_input_before_img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf89db3-4d55-4b1f-a05e-c0a1170f8dce/0f17ef8b-f8f5-4e9c-b1b9-64d684bee5a1.png"></image>
			</view>
			<input class="myinput" :value="value" @focus="cleartext(true)" @input="handleInput" @blur="cleartext(false)" :placeholder="placeholder" />
			<view class="yt_input_after">
				<image class="yt_input_after_img" :src="after_img" @click="clear"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['placeholder','value'],
		data(){
			return {
				after_img:"",
			}
		},
		methods:{
			clear(){
				this.$emit('input',"")
			},
			handleInput(e){
				this.$emit('input',e.detail.value)
			},
			cleartext(isfocus){
				console.log(isfocus)
				if(isfocus){
					this.after_img = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf89db3-4d55-4b1f-a05e-c0a1170f8dce/a178584a-5c42-4493-9f05-2ac7660fa679.png'
				}else{
					this.after_img = ""
				}
			}
		}
		
	}
</script>

<style lang="scss">
	.yt_input{
		display: inline-flex;
		border: 1rpx solid #00000000;
		background-color: #EBEBEBFF;
		border-radius: 26.7rpx;
		width: 500rpx;
		.yt_input_before{
			padding: 34.71rpx;
		}
		.yt_input_after{
			padding: 34.71rpx;
		}
		.yt_input_before_img{
			width: 50.3rpx;
			height: 56.07rpx;
			line-height: 80.1rpx;
		}
		.yt_input_after_img{
			width: 56.07rpx;
			height: 56.07rpx;
		}
		.myinput{
			margin: 42.72rpx 0 42.72rpx 0;
			width: 100%;
		}
	}
	
</style>
